 @mixin flex() {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
    }

@mixin flex-direction($direction:row){
    flex-direction: $direction !important;
}

@mixin flex-wrap() {
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
}

/*
 * ------------------------------------定位------------------------------------
 */
@mixin flex-center(){
    justify-content: center;
    align-items: center;
}

// 垂直定位
@mixin flex-align-item($direction) {
    align-items: $direction !important;
  }
  
@mixin flex-align-content($content){
    align-content: $content;
}

// 水平定位
@mixin flex-justify-content($content){
    justify-content: $content;
}

  
.flex {
    @include flex();
}

// 垂直排版
.flex-column{
    @include flex-direction(column);
}

// 横向默认排版
.flex-row{
    @include flex-direction();
}

// 换行
.flex-wrap {
    @include flex-wrap();
}
  
// 居中
.flex-center {
    @include flex-center();
}

// 垂直定位
.flex-align-start {
    @include flex-align-item(start);
  }
  .flex-align-center {
    @include flex-align-item(center);
  }
  .flex-align-end {
    @include flex-align-item(flex-end);
  }
  .flex-align-around {
    @include flex-align-content(space-around);
  }
  .flex-align-between {
    @include flex-align-content(space-between);
  }
  .flex-align-evenly {
    @include flex-align-content(space-evenly);
  }


  // 水平定位
.flex-justify-start {
    @include flex-justify-content(flex-start);
  }
  .flex-justify-center {
    @include flex-justify-content(center);
  }
  .flex-justify-end {
    @include flex-justify-content(flex-end);
  }
  .flex-justify-around {
    @include flex-justify-content(space-around);
  }
  .flex-justify-between {
    @include flex-justify-content(space-between);
  }
  .flex-justify-evenly {
    @include flex-justify-content(space-evenly);
  }